<template>
	<div class="apply-agent">
		<div class="com-header">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				升级成为{{agent_disname}}
			</div>
		</div>
		<div class="no-place"></div>
		<div class="a-banner">
			<img :src="list.agent_banner" />
		</div>
		<div class="a-intro">
			<div class="a-intro-c"
				v-html="list.agent_content"	
			>				
			</div>	
		</div>
		<div class="a-content">
			<div class="ac-content">
				<div class="ac-header">
					<div class="line"></div>
					<div class="title"><i class="icon"></i>升级需求</div>
					<div class="line"></div>
				</div>
				<div class="ac-need" v-for="(rule, index) in ruleList">
					<p>{{index+1}}.{{rule}}</p>
				</div>
				<div class="ac-tip">
					*注:&nbsp;&nbsp;&nbsp;上述条件需要全部满足才可升级
				</div>
				<div class="ac-gift bordertop-1px">
					<!-- <p>当前您的订单数量为{{nowList.order_num}}</p> -->
					<p> 一级粉丝数量为{{nowList.son}} </p>
					<p> 已支付金额为{{nowList.money}} </p>
					<!-- <p> 累计结算预估佣金为{{nowList.commission}}</p> -->
				</div>
			</div>			
		</div>
		<div class="ac-footer"
			@click="showPay()"
		>
			<p>立即升级</p>
		</div>
		<div class="ac-dialog"
			v-show="isPay"
			@click="isPay = false"
		>
			<div class="ac-d-content"
				@click.stop="isPay=true"
			>
				<div class="ac-d-item"
					@click="pay(1)"
					v-if="wx_login == 1 && wxpay_bool == 1"
				>
					<img src="../assets/img/share/wx.png" />
					<p>微信</p>
				</div>
				<div class="ac-d-item"
					@click="pay(2)"
					v-if="alipay_bool == 1"
				>
					<img src="../assets/img/alipay.png" />
					<p>支付宝</p>
				</div>
			</div>			
		</div>
		<div class="ac-pay" id="pay"></div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				type: 'wxpay',
				isPay: false,
				list: [],
				nowList: [],
				needList: [],
				ruleList: [],
				agent_disname: window.localStorage.getItem("agent_disname"),
				wxpay_bool: window.localStorage.getItem("wxpay_bool"),
				alipay_bool: window.localStorage.getItem("alipay_bool"),
				wx_login: window.localStorage.getItem("wx_login"),
			}
		},
		mounted(){
			this.getData()
		},
		methods: {
			showPay: function(){
				this.isPay = true;
			},
			pay: function(id){
				if( id == 1){
					this.type = 'wxwebpay'
					var params = new URLSearchParams();
					params.append('type', this.type);
					// params.append('openid', this.type);
					axios.post(Http.AGENTJOINPAY,params)
					.then( res => {
						var ret = res.data;
						var retData = ret.data.orderStr;
						if (typeof WeixinJSBridge == "undefined"){
						   if( document.addEventListener ){
						       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
						   }else if (document.attachEvent){
						       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
						       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
						   }
						}else{
						   onBridgeReady();
						}
						function onBridgeReady(){
						   	WeixinJSBridge.invoke(
						      	'getBrandWCPayRequest', {
							        "appId":retData.appid,     //公众号名称，由商户传入     
							        "timeStamp": retData.timestamp,         //时间戳，自1970年以来的秒数     
							        "nonceStr": retData.noncestr, //随机串     
							        "package": "prepay_id=" + retData.prepayid,     
							        "signType": "MD5",         //微信签名方式：     
							        "paySign": retData.sign
						      	},
						      	function(res){
						      		alert(JSON.stringify(res));
						      		if(res.err_msg == "get_brand_wcpay_request:ok"){
							      		Toast("支付成功")
						      		}else if(res.err_msg == "get_brand_wcpay_request:cancel"){
						      			Toast("支付取消")
						      		}else{
						      			Toast("支付失败")
						      		}
						   		}
						   	);
						}
					})
					
				}else if( id == 2 ){
					this.type = 'alipay'
					var params = new URLSearchParams();
					params.append('type', this.type);
					axios.post(Http.AGENTJOINPAY,params)
					.then( res => {
						var ret = res.data;
						// const div = document.createElement('div')
						// document.getElementById("pay").innerHTML = ret.data.orderStr;
						// // console.log(div);
						// // document.body.appendChild(div)
						// this.$nextTick(() => {
						// 	document.forms[0].submit()
						// })
						let routerData = this.$router.resolve({
							path: '/user/alipay',
							query: {
								htmls: ret.data.orderStr
							}
						})
						var htmls = ret.data.orderStr
						window.open(routerData.href, '_ blank')
						const div = document.createElement("div");
						div.innerHTML = htmls;
						document.body.appendChild(div);
						document.forms[0].submit();
					})
				}
			},
			getData(){
				axios.post(Http.AGENTJOIN)
				.then( res => {
					var ret = res.data;
					this.list= ret.data;
					this.nowList = ret['data']['agent_now_data'];
					this.needList = ret['data']['agent_require_rules'];
					if(this.needList.require_money_bool==1){
                        this.ruleList.push('收费金额'+this.needList.require_money+'元')
                    }
                    // if(this.needList.require_order_bool==1){
                    //     this.ruleList.push('自购订单数量满足'+this.needList.require_order+'单')
                    // }
                    if(this.needList.require_son_bool==1){
                        this.ruleList.push('邀请一级粉丝'+this.needList.require_son+'个')
                    }
                    // if(this.needList.require_commission_bool==1){
                    //     this.ruleList.push('累计结算预估佣金'+this.needList.require_commission+'元')
                    // }
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.apply-agent{
		background: #ff4e48;
		.com-header{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background: #ff4e48;
			color: #fff;
		}
		.a-banner{
			width: 100%;
			img{
				width: 100%;
			}
		}
		.a-intro{
			width: 92%;
			padding: 4%;
			.a-intro-c{
				padding: 0.2rem;
				background: #fff;
				border-radius: 0.1rem;
				line-height: 0.4rem;
			}
		}
		.a-content{
			background: #ff4e48;
			padding: 0.2rem 0.24rem;
			text-align: left;
			.ac-content{
				background: #fff;
				border-radius: 0.1rem;
				padding: 0.24rem;
				font-size: 0.26rem;
				.ac-header{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 1rem;
					font-size: 0.28rem;
					.title{
						margin: 0 0.4rem;
						.icon{
							margin-right: 0.2rem;
							width: 0.4rem;
							height: 0.4rem;
							display: inline-block;
							vertical-align: middle;
							background: url(../assets/img/index_quantitle.png) center center no-repeat;
							background-size: contain;
						}
					}
				}
				.ac-need{
					margin: 0.2rem 0;
				}
				.ac-tip{
					font-weight: bold;
					margin-bottom: 0.4rem;
				}
				.ac-gift{
					padding-top: 0.2rem;
				}
			}			
		}
		.ac-footer{
			padding: 0.3rem 0.4rem;
			padding-bottom: 2rem;
			background: #ff4e48;
			p{
				height: 0.88rem;
				line-height: 0.88rem;
				border-radius: 0.88rem;
				background: #37cec7;
				color: #fff;
				font-size: 0.28rem;
			}
		}
		.ac-dialog{
			position: fixed;
			top: 0;
			z-index: 99;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.6);
			.ac-d-content{
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				padding: 0.4rem 0;
				background: #fff;
				.ac-d-item{
					flex: 0 0 50%;
					img{
						width: 0.88rem;
						margin-bottom: 0.2rem;
					}
					p{
						font-size: 0.26rem;
					}
				}
			}
		}
	}
</style>